<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://unpkg.com/blueimp-file-upload@9.31.0/css/jquery.fileupload.css">
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-proGoods-edit">
        <input id="id" name="id" th:value="${proGoods.id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-8">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
						        <i class="glyphicon glyphicon-plus"></i>
						        <span>选择图片...</span>
                    <!-- The file input field used as target for the file upload widget -->
						        <input id="fileupload" type="file" name="file" multiple>
						        <input id="filePath" type="text" name="pgUrl" th:value="${proGoods.pgUrl}"
                                       style="display: none">
						    </span>
                <br>
                <br>
                <!-- The container for the uploaded files -->
                <div id="files" class="files">
                    <div>
                        <img alt="" width="200px" id="url" th:src="${proGoods.pgUrl}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">名称：</label>
            <div class="col-sm-8">
                <input id="pgTitle" name="pgTitle" th:value="${proGoods.pgTitle}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">分类：</label>
            <div class="col-sm-8">
                <!--                <select class="form-control input-s-sm inline" id="pcIdSelect" onchange="checkStatus()"-->
                <!--                        th:with="type=${@categoryController.selectCategory()}">-->
                <!--                    <option value="">请选择</option>-->
                <!--                    <option th:field="*{proGoods.pcId}" th:each="e : ${pcName}" th:text="${e['id']}"-->
                <!--                            th:value="${e['plEffective']}"></option>-->
                <!--                </select>-->
                <select class="form-control input-s-sm inline" id="pcIdSelect" onchange="checkStatus()"
                        th:with="type=${@categoryController.selectCategory()}">
                    <option value="">请选择</option>
                    <option th:field="*{proGoods.pcId}" th:each="e : ${type}" th:text="${e['pcName']}"
                            th:value="${e['id']}"></option>
                </select>
                <input style="display: none" id="pcId" th:value="${proGoods.pcId}" name="pcId"
                       class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">内容详细：</label>
            <div class="col-sm-8">
                <script id="container" name="pgContent" type="text/plain" style="height: 400px">
                </script>
                <input id="htmlContent" style="display:none" th:value="${proGoods.pgContent}" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">微信：</label>
            <div class="col-sm-8">
                <input id="pgWx" name="pgWx" th:value="${proGoods.pgWx}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">金币：</label>
            <div class="col-sm-8">
                <input id="pgMoney" name="pgMoney" th:value="${proGoods.pgMoney}" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">提交</button>
                <button th:onclick="'javascript:layer_close()'" class="btn btn-danger" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script src="/reasahi/js/jquery.ui.widget.js" th:src="@{/reasahi/js/jquery.ui.widget.js}"></script>
<script src="/reasahi/js/jquery.fileupload.js" th:src="@{/reasahi/js/jquery.fileupload.js}"></script>
<script src="../static/js/plugins/ueditor/ueditor.config.js" th:src="@{/js/plugins/ueditor/ueditor.config.js}"></script>
<script src="../static/js/plugins/ueditor/ueditor.all.min.js"
        th:src="@{/js/plugins/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript">
    $(function () {
        var ue = UE.getEditor('container', {
            toolbars: [
                ['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', 'link', 'simpleupload', 'justifyleft', 'justifyright', 'justifycenter', 'fontfamily', 'fontsize']
            ],
            autoHeightEnabled: true,
            autoFloatEnabled: true
        });
        // 当需要回显内容时，调用 setContent 方法
        ue.ready(function () {
            // 假设 htmlContent 是你需要回显的 HTML 内容
            var htmlContent = $("#htmlContent").val();
            ue.setContent(htmlContent);
        });

        function escapeHTML(str) {
            return str
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#x27;");
        }

        // Change this to the location of your server-side upload handler:
        var url = "/api/fileupload/upload";
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                console.log(data);
                if (data.result.code == 0) {
                    var imageUrl = data.result.msg;
                    $('#filePath').val(imageUrl);
                    $('#url').attr('src', imageUrl);
                }
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    })

    function checkStatus() {
        var input = $("#pcId");
        var val = $("#pcIdSelect option:selected").val();
        input.val(val)
    }
</script>
<script src="/reasahi/manage/proGoods/edit.js" th:src="@{/reasahi/manage/proGoods/edit.js}">
</script>
</body>
</html>
